<template>
  <!--报到-完成报到-患者信息-->
  <div class="report-result-info" :key="widgetKey">
    <template  v-if="finishReport&&(finishReport.length)">
      <div class="swiper-container-wrapper">
        <div class="swiper-slide" v-for="(item,index) in finishReport" :key="`${item.signId}_${index}`">
          <div class="swiper-slide-inside" :class="patientClassName(item)">
            <div class="top">
              <template v-for="itemKey in fieldList('top')">
                <div
                    class="top-item"
                    :class="fieldClassName(itemKey.value)"
                    v-if="fieldShow('top',(itemKey.value))"
                >
                  <div class="title">
                    <template v-if="(itemKey.value)==='orderNo'">
                      {{ (item[itemKey.value]) || '\u00a0' }}
                    </template>
                    <template v-else>
                      {{ itemKey.label || '\u00a0' }}
                    </template>
                  </div>
                  <div class="content">
                    <template v-if="(itemKey.value)==='registerNameKey'">
                      {{ item[itemKey.value] || (item.registerObjName) || '\u00a0' }}
                    </template>
                    <template v-else-if="(itemKey.value)==='roomKey'">
                      {{ item[itemKey.value] || (item.treatmentRoomName) || '\u00a0' }}
                    </template>
                    <template v-else-if="(itemKey.value)==='orderNo'">
                        <span class="patient_status">
                          {{ patientStatus(item) }}
                        </span>
                    </template>
                    <template v-else>
                      {{ (item[itemKey.value]) || '\u00a0' }}
                    </template>
                  </div>
                </div>
              </template>
            </div>
            <div class="bottom">
              <template v-for="itemKey in fieldList('bottom')">
                <div
                    class="item"
                    :class="fieldClassName(itemKey.value)"
                    v-if="fieldShow('bottom',(itemKey.value))"
                >
                  <div class="title">
                    <template v-if="(itemKey.value)!=='print'">
                      {{ itemKey.label || '\u00a0' }}
                    </template>

                  </div>
                  <div class="content">
                    <template v-if="(itemKey.value)==='patientCardNoHide'">
                      {{ (item[itemKey.value]) || (item.patientCardNo) || '\u00a0' }}
                    </template>
                    <template v-else-if="(itemKey.value)==='print'">
                      <div @click="handlePrint(item)">打印小票</div>
                    </template>
                    <template v-else>
                      {{ (item[itemKey.value]) || '\u00a0' }}
                    </template>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <el-empty class="empty-info" description="暂无数据" :image-size="340"></el-empty>
    </template>
  </div>
</template>

<script>
import {v4 as uuid} from 'uuid';
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "ReportFinish2",

  componentName: "ReportFinish2",

  props: {
    devType: {
      type: Boolean,
      default: false,
    },
    field: {
      type: Object,
      default: Object(),
    },
    tabKey:{
      type: String,
      default: 1,
    }
  },

  data() {
    return {
      status: true,
      widgetKey: uuid(),
      optionsInfo: Object(),
      header: require("@a/images/design/header.jpeg"),
    }
  },

  computed: {
    // 获取对应的中文名称
    fieldName() {
      return function (row) {
        switch (row) {
          case 'orderNo':
            return '排序号'
          case 'countNum':
            return '等待人数'
          case 'registerNameKey':
            return '号别'
          case 'roomKey':
            return '诊室'
          case 'deptName':
            return '科室'
          case 'patientCardNoHide':
            return '卡号'
          case 'patientName':
            return '姓名'
          case 'projectName':
            return '检查项'
          case 'print':
            return '打印小票'
        }
      }
    },

    // 获取对应的className
    fieldClassName() {
      return function (row) {
        switch (row) {
          case 'orderNo':
          case 'countNum':
          case 'roomKey':
          case 'registerNameKey':
            return `patient-${row}`;
          case 'deptName':
            return `dept-area`;
          case 'patientCardNoHide':
            return `card-area`;
          case 'patientName':
            return `name-area`;
          case 'projectName':
            return `project-name`;
          case 'print':
            return `print-area`;
        }
      }
    },

    // 显示字段是否显示
    fieldShow() {
      return function (type, row) {
        let topCheckListInfo = ['orderNo', 'countNum', 'registerNameKey', 'roomKey'];
        let bottomCheckListInfo = ['deptName', 'patientCardNoHide', 'patientName'];
        let {topCheckList = topCheckListInfo, bottomCheckList = bottomCheckListInfo} = (this.optionsInfo);
        switch (type) {
          case 'top':
            return topCheckList.includes(row)
          case 'bottom':
            return bottomCheckList.includes(row)
        }
      }
    },

    // 显示字段对象
    fieldList() {
      return function (type) {
        let {patientShowFields = types['patientFields']} = (this.optionsInfo);
        switch (type) {
          case 'top':
            return patientShowFields['topFields']
          case 'bottom':
            return patientShowFields['bottomFields']
        }
      }
    },

    // 完成报到列表
    finishReport() {
      this.widgetKey = uuid();
      let devType = (this.devType);
      let patientInfos = this.$store.getters['getReportPatientInfo'];
      let patientInfo = devType? (patientInfos.apiData) : (patientInfos.mockData);
      if(patientInfo?.signList?.length){
        return this.$lodash.filter(patientInfo.signList, {patientDataStatus: (this.tabKey)});
      }else {
        return Array();
      }
    },

    //状态-中文
    patientStatus() {
      return function (row) {
        let type = parseInt(row.patientDataStatus);
        switch (type) {
          case 0:
            return '已报到'
          case 1:
            return '已诊结'
        }
      }
    },

    //患者状态-样式
    patientClassName() {
      return function (row) {
        let type = parseInt(row.patientDataStatus);
        switch (type) {
          case 0:
            return 'patient_register'
          case 1:
            return 'patient_no_register'
        }
      }
    },
  },

  mounted() {
  },

  methods: {
    //  打印小票
    handlePrint(row) {
      // 调用父级的API
      console.log(row)
      this.$emit('handleSignPrint', row);
    }
  },

  watch: {
    field: {
      handler: function (val) {
        this.widgetKey = uuid();
        let key = (val.options.config)
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true
    }
  },

  destroyed() {

  },

};
</script>

<style lang="scss" scoped>
.report-result-info {
  overflow: hidden;
  width: calc(100%);
  border-radius: 30px;
  box-sizing: border-box;
  position: relative;

  .swiper-container-wrapper {
    width: 100%;
    transform-style: preserve-3d;

    .swiper-slide {
      width: calc(100% - 80px);
      margin: 36px 40px 20px 40px;
      box-sizing: border-box;
      background: white;
      border-radius: 20px;
    }

    :deep(.swiper-slide-inside) {
      box-sizing: border-box !important;
      padding: 0 40px;
      color: rgba(0, 89, 179, 1);

      .top {
        display: flex;
        flex-direction: column;
        font-size: 80px;
        line-height: 118px;
        padding: 28px 0 24px 0;
        justify-content: space-between;
        border-bottom: 4px #DDDDDD solid;

        .top-item {
          font-weight: bold;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;

          .title {
            min-width: 260px;
            flex-basis: 260px;
            width: 260px;
            text-align: left;
            @include singleEllipsis(260px);
          }

          .content {
            text-align: right;
            @include singleEllipsis(calc(100% - 260px));
            .patient_status {
              padding: 12px 26px;
              font-size: 54px;
              color: #FFFFFF;
              background: #0059B3;
              border-radius: 20px;
            }
          }
        }

        .patient-orderNo {
          line-height: 116px;
          font-size: 80px;
        }

        .patient-countNum {
          font-size: 54px;
          line-height: 82px;
        }

        .patient-registerNameKey,
        .patient-roomKey {
          font-size: 54px;
          line-height: 82px;
        }
      }

      .bottom {
        margin-top: 18px;
        padding-bottom: 14px;

        .item {
          display: flex;
          font-size: 50px;
          line-height: 1.56;
          justify-content: space-between;

          .title {
            flex-shrink: 0;
            min-width: 200px;
            text-align: left;
            font-size: 52px;
            font-weight: 400;
            align-self: center;
            color: rgba(102, 102, 102, 1);
          }

          .content {
            color: rgba(51, 51, 51, 1);
            text-align: right;
            @include fontWeight();
          }
        }

        .print-area {
          .content {
            border: 1px #dcdee2 solid;
            background: #2d8cf0;
            border-radius: 100px;
            color: white;
            padding: 6px 48px;
            font-size: 44px;
            display: flex;
            align-self: center;
            line-height: initial;
            overflow: hidden;
            cursor: pointer;
          }
        }

        .project-name{
          .content{
            @include singleEllipsis(100%)
          }
        }
      }
    }

    :deep(.patient_no_register) {
      color: #666666;

      .top .top-item .content .patient_status {
        color: #FFFFFF;
        background: #666666;
      }

    }
  }

  :deep(.empty-info){
    .el-empty__description p{
      font-size: 64px !important;
    }
  }
}
</style>